<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 如果对方图片服务器 => 有识别功能 添加此标签(请求时不携带自身Referer信息) -->
    <meta name="referrer" content="never">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/tool.js"></script>
    <style>
        .container {
            width: 800px;
            margin: 50px auto;
        }

        .comment-wrap .comment-box {
            width: 100%;
            height: 200px;
        }

        .comment-wrap .comment-box .comment-content {
            width: 100%;
            height: 100%;
            padding: 5px;
            box-sizing: border-box;
            resize: none;
            outline: none;
        }

        .comment-wrap .comment-footer {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }

        .comment-wrap .comment-footer .comment-tips {
            font-size: 14px;
            line-height: 24px;
        }

        .comment-list {
            margin-top: 50px;
        }

        .comment-list .list-item {
            padding: 5px 0;
            display: flex;
        }

        .comment-list .list-item .user-face img {
            width: 100%;
            height: 100%;
        }

        .comment-list .list-item .user-face {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
            margin-top: 20px;
        }

        .comment-list>.list-item>.user-con {
            border-top: 1px solid #999;
            flex: 1;
            padding: 20px;
        }

        .comment-list .list-item .user-con .user {
            font-size: 13px;
            line-height: 20px;
        }

        .comment-list .list-item .user-con .text {
            font-size: 14px;
            line-height: 20px;
            min-height: 20px;
            margin-top: 5px;
        }

        .comment-list .list-item .user-con .info {
            font-size: 12px;
            line-height: 16px;
            margin-top: 5px;
        }

        .comment-list .list-item .user-con .info span {
            margin-right: 10px;
        }

        .comment-list .list-item .reply-box {
            margin-top: 10px;
        }

        .comment-list .list-item .reply-box .user-face {
            width: 30px;
            height: 30px;
            margin-top: 5px;
        }

        .comment-list .list-item .reply-box .reply-con {
            display: flex;
        }

        .comment-list .list-item .reply-box .reply-con .user {
            margin-top: 5px;
            margin-right: 10px;
        }

        .comment-list .list-item .reply-wrap {
            margin-top: 10px;
            display: flex;
            height: 64px;
            display: none;
        }

        .comment-list .list-item .reply-wrap.show {
            display: flex;
        }

        .comment-list .list-item .reply-wrap .reply-comment {
            flex: 1;
            outline: none;
            resize: none;
        }

        .comment-list .list-item .reply-wrap .reply-send {
            width: 64px;
            height: 64px;
            margin-left: 20px;
            background-color: #00a1d6;
            color: #fff;
            border-radius: 10px;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .comment-list .list-item .reply-wrap .reply-send span {
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="comment-wrap">
            <div class="comment-box">
                <textarea name="" cols="30" rows="10" class="comment-content"></textarea>
            </div>
            <div class="comment-footer">
                <div class="comment-tips">你还可以输入50个字</div>
                <button class="comment-send">发送</button>
            </div>
        </div>

        <div class="comment-list">
            <!-- <div class="list-item">
                <div class="user-face">
                    <img src="https://i2.hdslb.com/bfs/face/b20034eb0a516744566530144b649f6651cdfc40.jpg@48w_48h_1c_1s.webp"
                        alt="">
                </div>
                <div class="user-con">
                    <div class="user">张三</div>
                    <div class="text">有人在看段子，有人在照镜子</div>
                    <div class="info">
                        <span class="time">2022-04-09 10:11</span>
                        <span class="reply reply-level-1">回复</span>
                    </div>
                    <div class="reply-box">
                        <div class="list-item">
                            <div class="user-face">
                                <img src="https://i2.hdslb.com/bfs/face/b20034eb0a516744566530144b649f6651cdfc40.jpg@48w_48h_1c_1s.webp"
                                    alt="">
                            </div>
                            <div class="user-con">
                                <div class="reply-con">
                                    <div class="user">张三</div>
                                    <div class="text">有人在看段子，有人在照镜子</div>
                                </div>
                                <div class="info">
                                    <span class="time">2022-04-09 10:11</span>
                                    <span class="reply reply-level-2">回复</span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="reply-wrap">
                        <textarea name="" id="" cols="30" rows="10" class="reply-comment"></textarea><a
                            href="javascript:;" class="reply-send"><span>发表<br>评论</span></a>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</body>
<script>
    // 模拟bilibili 留言回复
    // (1) 输入时计数统计
    //    a. 先按下 在输入 => 按下时,字符可能还没有输入 => 差了一位 => 解决:抬起时在触发一遍
    //    b. 中文输入法可能会卡bug: => 悬浮输入 =>   解决方法: 截取前50
    //    c. 中文输入是字符串也会被计数 =>输入中文时 停止计数

    // (2) 点击发送/快捷键 发送

    // (3) 留言回复

    var commentContent = document.getElementsByClassName("comment-content")[0];
    var commentTips = document.getElementsByClassName("comment-tips")[0];
    var commentSend = document.getElementsByClassName("comment-send")[0];
    var commentList = document.getElementsByClassName("comment-list")[0];

    const ALLOW_COUNT = 50;

    // commentContent.onkeypress  = function(){} 

    commentContent.addEventListener("keypress", inputHandler);
    commentContent.addEventListener("keyup", inputHandler);
    commentSend.addEventListener("click", sendCommentHandler);

    commentList.addEventListener("click", replyHandler)

    function inputHandler(e) {
        var e = e || window.event;
        var isComposing = e.isComposing;


        var comment = this.value;
        console.log(comment);

        if (isComposing == false) { //不是中文时 => 计数
            var sum = ALLOW_COUNT - comment.length;
            commentTips.textContent = `你还可以输入${sum}个字`;
        }

        if (sum <= 0) {
            commentTips.textContent = `你还可以输入0个字`;
            // 中文卡bug => 截取前50
            var str = comment.substr(0, 50);
            console.log(comment);
            this.value = str;

            // 超出50 => 不能输
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }

        }

        var keyCode = e.which || e.keyCode;
        if (e.ctrlKey && keyCode == 13) {
            sendCommentHandler();
        }

    }

    function sendCommentHandler() {
        var comment = commentContent.value;
        if (comment) {

            // 在发送评论之前 对评论进行过滤 => 将所有的敏感词 替换为 等量的**

            // str.repeat(n)   将字符串重复拼接n次后返回

            // 依次按顺序替换
            // var keyWords = ["菜逼", "菜狗", "NMD", "CNM", "TMD", "CAO"];
            // for (var i = 0; i < keyWords.length; i++) {
            //     var word = keyWords[i]; // 每一个敏感词
            //     var reg = new RegExp(word, "ig");
            //     if (comment.search(reg) != -1) {
            //         // var replaceStr = "";
            //         // for (var j = 0; j < word.length; j++) {
            //         //     replaceStr += "*"
            //         // }
            //         // comment = comment.replace(reg, replaceStr);
            //         comment = comment.replace(reg, "*".repeat(word.length));
            //     }
            // }

            var keyWords = ["菜逼", "菜狗", "NMD", "CNM", "TMD", "CAO"];
            var reg = new RegExp(keyWords.join("|"), "ig");

            // replace() 方法可以接收一个回调函数,每次替换时执行 => 根据回调函数的返回值决定用于替换的内容,回调函数有一个形参 可以接收被替换的字符串
            // 

            comment = comment.replace(reg, function (oldStr) {//形参 => 正则表达式匹配的被替换的字符串
                console.log(oldStr);
                return "*".repeat(oldStr.length);  //用于替换的新字符串
            });






            var html = `<div class="list-item">
                <div class="user-face">
                    <img src="https://i2.hdslb.com/bfs/face/7cbe74319f1be30fee54a2f3d1271d6bb7c13ebb.jpg@160w_160h_1c_1s.webp"
                        alt="">
                </div>
                <div class="user-con">
                    <div class="user">张三</div>
                    <div class="text">${comment}</div>
                    <div class="info">
                        <span class="time">${DateFormat("YYYY-MM-DD hh:mm")}</span>
                        <span class="reply reply-level-1">回复</span>
                    </div>
                    <div class="reply-box">
                        
                    </div>
                    <div class="reply-wrap">
                        <textarea name="" id="" cols="30" rows="10" class="reply-comment"></textarea><a
                            href="javascript:;" class="reply-send"><span>发表<br>评论</span></a>
                    </div>
                </div>
            </div>`;
            commentList.innerHTML = html + commentList.innerHTML;
            commentContent.value = "";
        }
    }

    function replyHandler(e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;

        // 点击一级回复
        if (target.classList.contains("reply-level-1")) {
            var userCon = target.parentElement.parentElement;
            var replyWrap = userCon.getElementsByClassName("reply-wrap")[0];
            replyWrap.classList.add("show");
        } else if (target.classList.contains("reply-send")) {
            var replyCommentArea = target.previousElementSibling;
            var replyComment = replyCommentArea.value;

            var html = `<div class="list-item">
                            <div class="user-face">
                                <img src="https://i2.hdslb.com/bfs/face/b8bfa4d51e44d42b043fc82db19889b7a2eccad9.jpg@160w_160h_1c_1s.webp"
                                    alt="">
                            </div>
                            <div class="user-con">
                                <div class="reply-con">
                                    <div class="user">张三</div>
                                    <div class="text">${replyComment}</div>
                                </div>
                                <div class="info">
                                    <span class="time">${DateFormat("YYYY-MM-DD hh:mm")}</span>
                                    <span class="reply reply-level-2">回复</span>
                                </div>
                            </div>
                        </div>`;
            replyCommentArea.value = "";
            var replyWrap = target.parentElement;
            var replyBox = replyWrap.previousElementSibling;

            replyBox.innerHTML += html;
            replyWrap.classList.remove("show");


        } else if (target.classList.contains("reply-level-2")) {
            console.log(target, e.path);
            var replyBox = e.path.find(function (item) {
                return item.className == "reply-box";
            })
            var replyWrap = replyBox.nextElementSibling;
            replyWrap.classList.add("show");
        }
    }

</script>

</html>